<template>
    <div class="adminMenu">
        <PureTableBar :title="t('adminMenu.menuManagement')" :columns="columns" @refresh="onSearch" v-if="tableHtml">
            <template #buttons>
                <el-button type="primary" :icon="useRenderIcon(AddFill)" @click="openDialog()">
                    {{ t('adminMenu.addMenu') }}
                </el-button>

            </template>
            <template v-slot="{ size, dynamicColumns }">
                <pure-table ref="tableRef" adaptive :adaptiveConfig="{ offsetBottom: 32 }" align-whole="center"
                    row-key="Id" showOverflowTooltip table-layout="auto" :loading="loading" :size="size"
                    :data="dataList" :columns="dynamicColumns"
                    :tree-props="{ children: 'Children', hasChildren: 'hasChildren' }" :header-cell-style="{
                        background: 'var(--el-fill-color-light)',
                        color: 'var(--el-text-color-primary)'
                    }">
                    <template #operation="{ row }">
                        <el-button class="reset-margin" link type="primary" :size="size" :icon="useRenderIcon(EditPen)"
                            @click="openDialog('编辑', row)">
                            {{ t('adminMenu.edit') }}
                        </el-button>
                        <el-button class="reset-margin" link type="danger" :size="size"
                            :icon="useRenderIcon(outlineDelete)" @click="handleDelete(row)">
                            {{ t('adminMenu.delete') }}
                        </el-button>
                    </template>
                </pure-table>
            </template>
        </PureTableBar>
    </div>
</template>

<script lang='ts' setup>
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useDept } from "./utils/hook";
import { reactive, ref, onMounted, watch, nextTick } from 'vue'
import { useTranslationLang } from "@/layout/hooks/useTranslationLang";
const { locale } = useTranslationLang();
import { useI18n } from "vue-i18n";
const { t } = useI18n();

// iconify-icons
import AddFill from "@iconify-icons/ri/add-circle-line";
import EditPen from "@iconify-icons/ep/edit-pen";
import outlineDelete from '@iconify-icons/ic/outline-delete';

const tableHtml = ref(true);

watch(() => locale.value, (val) => {
    tableHtml.value = false
    nextTick(() => {
        tableReloading()
        tableHtml.value = true
    })
})

const {
    dataList,
    loading,
    columns,
    onSearch,
    openDialog,
    handleDelete,
    tableReloading
} = useDept();

onMounted(() => {

})

</script>

<style lang="scss" scoped></style>